<template>
  <div class="index-content pa">
    <div v-if="user" class="fr index-login">
      <div class="index-box">
        <div class="uname">{{user.name}}，</div>
        <div v-if="user.offerNum>0" class="login_msg">您已认购{{user.offerNum}}套，还可认购{{user.limitAmount}}套</div>
        <div v-if="user.offerNum==0" class="login_msg">您还未认购</div>
        <div><a  class="btn-logout button button-orange button-diy" @click="loginOut">
        <!-- <img src="img/v1/按钮-注销登录-04.png"/> -->
          注销登录
        </a><a  id="btn-updatePwd" class="button button-orange button-diy">
        修改密码
        </a>
        </div>  
      </div>
    </div>
    <div v-if="!user" class="fr index-nologin">
      <div class="index-box">
        <form v-if="loginType=='PWD'">
            <div>身份证：<input v-model="account" type="text" style="width: 60%;"/></div>
            <div>密　码：<input v-model="password" type="password" style="width: 60%;"/></div>
            <div>
              <div> <a class="button button-orange button-diy" @click="pwdlogin">
              登录
              </a> </div>
            </div>
        </form>
        <form v-if="loginType=='SMS'">
            <div>身份证：<input v-model="account" type="text" style="width: 60%;"/></div>
            <div>手机号：<input v-model="phone" type="text" style="width: 60%;"/></div>
            <div>验证码：<input v-model="passCode" type="text" style="width: 60%;"/></div>
            <div>
              <div> 
              <a class="button button-orange button-diy">
              登录
              </a> 
              <a class="button button-orange button-diy">
              获取短信验证码<span id="smsCount"></span>
              </a> 
              </div>
            </div>
        </form>
      </div>
    </div>
    <div v-if="status=='updatePwd'" class="fr index-updatePwd">
      <div class="index-box">
        <form>
          <div>原密码&#12288;：<input id="oldPass" type="password" value="" style="width: 60%;"/></div>
          <div>新密码&#12288;：<input id="newPass" type="password" value="" style="width: 60%;"/></div>
          <div>再次输入：<input id="againPass" type="password" value="" style="width: 60%;"/></div>
          <div>
            <div> <a  class="confirm button button-orange button-diy">
            确定
            </a> <a  class="cancel button button-orange button-diy">
            取消
            </a> </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<style type="text/css" lang="less" scoped>
  .index-content{
    top: 28%;
    word-break: break-all;
    font-size: 1.6rem;
    z-index: 1002;
    width: 80%;
    left: 10%;
    .index-box{
      background: rgba(255,255,255,.3);
      border-radius: 20px;
      padding: .4rem 0;
      div{
        line-height: 2.2rem;
        font-size: 1.3rem;
        color: #fff;
      }
    }
  }
  .pa{
    position: absolute;
  }
</style>
<script>
import Swal from 'sweetalert'
import {post,get} from '../public/js/utils.js'
export default {
  data:function () {
    return {
      loginType: 'PWD',
      account: '',
      phone: '',
      passCode: '',
      password: '',
      status:'nologin',
    }
  },
  props:['user'],
  mounted:async function(){
    // this.user = await this.$root.getUser()
  },
  methods:{
    async pwdlogin (){
       if(!this.account){
         Swal('', '请输入账号', 'error')
         return 
       }
       if(!this.password){
         Swal('', '请输入密码', 'error')
         return 
       }
       const res = await post('/users/pwdlogin', {account:this.account, password:this.password})
       if(res.err==1){
         Swal('', res.msg, 'error')
         return 
       }
       this.$root.getUser()
       // this.user =await this.$root.getUser()
    },
    async loginOut(){
      const res = await get('/users/loginOut')
      if(res.err==1){
        Swal('', res.msg, 'error')
        return 
      }
      this.$root.setUser('')
      // this.user =await this.$root.getUser()
    },
    cancel(){
    },
    jump(compName, data){
      this.$root.chgComp(compName, data)
    }
  }

}
</script>
